<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="content">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/custom.css}" media="all">
</head>
<div class="layui-card">
    <div class="layui-card-header" style="height: 100%;">
        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-input-inline">
                <input type="text" name="id" id="id" placeholder="编号" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="memberId" id="memberId" placeholder="会员ID" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="amount" id="amount" placeholder="消费金额(充值)" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="giftAmount" id="giftAmount" placeholder="消费金额(赠送)" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="items" id="items" placeholder="消费项目" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="operators" id="operators" placeholder="操作人姓名" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" id="consumptionRecordsStart" name="start" placeholder="消费时间范围 起"
                       class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" id="consumptionRecordsEnd" name="end" placeholder="消费时间范围 止"
                       class="layui-input">
            </div>
            <br/>
            <button class="layui-btn" data-type="reload">查询</button>
            <button class="layui-btn" data-type="reset">重置</button>
        </div>
    </div>
    <div class="layui-card-body">
        <table id="consumption-records-table" lay-filter="consumption-records-table"></table>
    </div>
</div>

<!--工具菜单栏-->
<script type="text/html" id="toolbarList">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchImport">批量导入记录</button>
    </div>
</script>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/member/member_list.js}" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'laydate', 'layer'], function () {
        let table = layui.table;
        let laydate = layui.laydate;
        let $ = layui.$;

        let BIZ_NAME = 'consumption-records';
        let BIZ_TABLE = 'consumption-records-table';
        let BIZ_QUERY = 'consumption-records-query';
        let tableConsumptionRecordsObj;
        let formConsumptionRecordsObj;

        /*检索栏按钮 点击事件监控*/
        $('.layui-form-item .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        let cols = [
            [
                {title: '记录编号', field: 'id', align: 'center'},
                {title: '会员ID', field: 'memberId', align: 'center'},
                {title: '会员姓名', field: 'memberName', align: 'center'},
                {title: '消费金额(充值)', field: 'amount', align: 'center'},
                {title: '消费金额(赠送)', field: 'giftAmount', align: 'center'},
                {title: '消费项目', field: 'items', align: 'center'},
                {title: '进店渠道', field: 'fitEntryChannels', align: 'center'},
                {title: '消费时间', field: 'consumptionTime', align: 'center'},
                {title: '操作人', field: 'operators', align: 'center'}
            ]
        ]

        tableConsumptionRecordsObj = table.render({
            elem: '#' + BIZ_TABLE,
            url: '/' + BIZ_NAME + '/page',
            text: {none: '暂无相关数据'},
            response: {
                statusCode: 200,
                msgName: 'message'
            },
            page: true,
            limit: 10,
            limits: [10, 20, 50],
            cols: cols,
            skin: 'line',
            toolbar: '#toolbarList', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        // 监听搜索
        let active = {
            reset: function () {
                $('#id').val('');
                $('#memberId').val('');
                $('#amount').val('');
                $('#giftAmount').val('');
                $('#items').val('');
                $('#operators').val('');
                $('#consumptionRecordsStart').val('');
                $('#consumptionRecordsEnd').val('');
            },
            reload: function () {
                //执行重载
                table.reload('consumption-records-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: $('#id').val(),
                        memberId: $('#memberId').val(),
                        amount: $('#amount').val(),
                        giftAmount: $('#giftAmount').val(),
                        itemsLike: $('#items').val(),
                        operators: $('#operators').val(),
                        start: $('#consumptionRecordsStart').val(),
                        end: $('#consumptionRecordsEnd').val()
                    }
                });
            }
        };

        //日期
        laydate.render({
            elem: '#consumptionRecordsStart',
            type: 'datetime',
            trigger: 'click'
        });

        //日期
        laydate.render({
            elem: '#consumptionRecordsEnd',
            type: 'datetime',
            trigger: 'click'
        });
    });
</script>
